Microsoft Edge 浏览器附带称为 Microsoft Edge DevTools 的内置 Web 开发工具。 DevTools 是一组 Web 开发工具，显示在浏览器中呈现的网页旁边。 DevTools 提供了一种用于检查和调试网页和 Web 应用的强大方法。 甚至可以在 DevTools 环境中编辑源文件和创建网站项目。

使用 DevTools，可以执行以下操作：

使用带有可视界面的实时工具检查、调整和更改网页中元素的样式。 检查浏览器存储内容以构造网页的位置，包括 .html、 .css、 .js和 .png 文件格式。

模拟网站在不同设备上的行为方式，并模拟具有不同网络条件的移动环境。 检查网络流量并查看问题的位置。

使用断点调试和实时控制台调试 JavaScript。 查找 Web 应用的内存问题和呈现问题。

查找产品中的辅助功能、性能、兼容性和安全问题，并使用 DevTools 修复发现的辅助功能问题。

使用开发环境将 DevTools 中的更改与文件系统以及从 Web 同步。

在 Microsoft Edge 中，可以通过以下任一方式使用鼠标或键盘打开 DevTools。 打开哪个工具取决于打开 DevTools 的方式。

主要方式：

其他方法：

打开 DevTools 的好方法是右键单击网页上的项，然后选择“ 检查”：

DevTools 随即打开，其中“元素”工具的 DOM 树 中突出显示了右键单击的 元素 ：

在 Microsoft Edge 工具栏上，可以选择“设置”和“更多 (...) >更多工具>开发人员工具：

若要在浏览器中打开新选项卡时自动打开 DevTools，

在命令行中，打开 Microsoft Edge，传入 --auto-open-devtools-for-tabs 标志，如下所示：

Windows 命令提示符：

Windows PowerShell：

macOS 上的 bash shell：

Linux 上的 bash shell：

重要：通过 auto-open-devtools-for-tabs启动时，必须没有正在运行的 Microsoft Edge 进程，因此可能需要在 中edge://settings/system禁用启动提升。

启动提升功能使最少的 Microsoft Edge 进程在后台运行。 这会干扰该功能， auto-open-devtools-for-tabs 需要禁用此功能才能使用它。 有关详细信息，请参阅 获取有关启动提升的帮助。

若要防止按 F12 打开 DevTools，

在 Microsoft Edge 中，转到 edge://settings/system。

在“ 开发人员工具” 部分中，关闭 “按下 F12 键时打开 DevTools” 开关。

可以使用鼠标或键盘与 DevTools 交互。 键盘快捷方式提供了一种快速访问功能的方法，并且是辅助功能所必需的。 可以通过键盘和辅助技术（如屏幕阅读器）越来越多地访问各种工具。

请参阅 键盘快捷方式 和 使用辅助技术导航 DevTools。

可以将 DevTools 停靠在浏览器的右侧、左侧或底部，或将其取消停靠到单独的窗口中。 请参阅 更改 DevTools 放置 (Undock、Dock 到底部、停靠到左侧) 。

DevTools UI 是使用 HTML 和 CSS（如网页）实现的，因此你可以使用标准键盘快捷方式进行放大和缩小。 DevTools 和呈现的页面的缩放级别是独立的。

缩放浏览器的 DevTools 部分：

若要缩放呈现的页面，请单击页面，然后使用上述相同键盘快捷方式。

若要将缩放还原到 100%：

缩放 DevTools 设置：

使用命令菜单缩放 DevTools：

DevTools 工具提示功能可帮助你了解所有不同的工具和窗格。 将鼠标悬停在 DevTools 的每个大纲区域上，了解有关如何使用该工具的详细信息。 若要打开工具提示，请执行下列操作之一：

然后将鼠标悬停在 DevTools 的每个大纲区域上：

若要关闭工具提示，请按 Esc。

DevTools 提供强大的功能来检查、调试和更改浏览器当前显示的网站。 大多数工具实时显示更改。 实时更新使这些工具非常有用，可用于优化 Web 项目的外观和导航或功能，而无需刷新或生成它。

除了“ 检查 ”工具和 设备仿真) (几个图标工具外，DevTools 还分为一组选项卡式工具，例如 “元素” 工具、 “控制台” 工具和 “源 ”工具。 在 命令菜单中，工具称为 面板。 工具的选项卡包含包含工具 UI 的面板。

更高级别的选项卡：

工具被组织成main工具栏和抽屉工具栏上的一组选项卡。 大多数工具也称为 面板。 面板是工具的内部 UI。 工具有一个选项卡，可以在main工具栏和抽屉工具栏上显示。

较低级别的选项卡：

在某些工具的面板中，有一组或多组选项卡 (选项卡式窗格) 。 例如，“元素”工具包含一组选项卡，其中包括“样式”、“事件侦听器”和“辅助功能”选项卡。 对于其他工具，该工具的面板左侧列出了页面。

有两个工具栏：DevTools 顶部的main工具栏和按 Esc 时底部的抽屉。

main工具栏包含以下功能：

图标工具：

工具选项卡：

图标：

下面介绍了工具栏功能。

单击“ 检查工具 ” () 按钮时，可以在当前网页上选择元素。 当 “检查 ”工具处于活动状态时，你可以将鼠标移到网页的不同部分，以获取有关页面元素的详细信息，以及显示页面元素的布局尺寸、填充和边距的多色覆盖。

单击 “设备仿真 () 按钮，在模拟设备模式下显示当前网站。 借助设备仿真工具，可以运行并测试在调整浏览器大小时产品的反应。 它还提供移动设备上的布局和行为的估计值。

请参阅 模拟移动设备 (设备仿真) 。

包括有关 DevTools 新功能、如何联系团队的信息，以及有关某些功能的信息。

允许检查、编辑和调试 HTML 和 CSS。 可以在工具中编辑，同时在浏览器中实时显示更改。

元素工具始终出现在main工具栏上。

在 控制台工具中 ，可以：

控制台工具始终存在于main工具栏和抽屉工具栏上。

请参阅 控制台。

源工具是代码编辑器和 JavaScript 调试器。 可以编辑项目、维护代码段和调试当前项目。

源工具始终出现在main工具栏上。

使用 网络 工具可以监视和检查来自网络和浏览器缓存的请求或响应。 可以筛选请求和响应以满足你的需求，并模拟不同的网络条件。

请参阅 检查网络活动。

请参阅 性能工具简介。

请参阅 修复内存问题。

请参阅 查看、编辑和删除 Cookie。

请参阅 使用安全工具了解安全问题。

请参阅 Lighthouse 工具。

确定潜在的 CSS 改进。

请参阅 CSS 概述工具。

若要显示因窗口太窄而处于打开状态但隐藏的工具，请单击“ 更多选项卡 () 按钮。

若要将工具添加到工具栏，请单击“ 更多工具 () 按钮。

JavaScript 错误计数器 () 按钮显示以下内容：

包含 X 的红色圆圈，后跟当前网页上自动检测到的 JavaScript 错误数。

一个黄色三角形，其中包含感叹号，后跟当前网页上自动检测到的 JavaScript 警告数。

JavaScript 计数器按钮的工具提示是“打开控制台”，以查看 # 错误、# 警告。

单击 JavaScript 错误计数器以打开 控制台 并了解错误。

“问题计数器 () 按钮显示当前网页上自动找到的 HTML 或 CSS 问题数。

“问题”计数器的工具提示是“打开问题以查看 # 问题”。 按钮图标是蓝色的语音气泡图标，后跟 HTML 或 CSS 问题的数量。

单击 “问题”计数器 以打开 “问题” 工具。

若要打开“DevTools 设置” 网页，请单击“ 设置” () 按钮。 “设置”页包含以下子页：

请参阅自定义 DevTools 中的设置。

若要打开“ 发送反馈 ”对话框，请单击“ 发送反馈 () 按钮。 “ 发送反馈 ”对话框随即打开。 输入信息以描述所发生的情况，并自动包含屏幕截图。 使用 “发送反馈 ”与 DevTools 团队联系，以报告问题、问题或建议想法。

请参阅 联系 Microsoft Edge DevTools 团队。

“ 自定义和控制 DevTools () ”按钮打开一个下拉菜单，用于定义停靠 DevTools 的位置、搜索、打开不同工具等。

单击 DevTools 右上角的 “关闭) 按钮，关闭 DevTools 并使用整个窗口显示当前网页。

有关每个工具的摘要，请参阅关于工具列表中的所有工具概述。

通常，单词“tool”、“tab”或“panel”可以互换使用。 在命令菜单中，工具称为 面板;例如， “元素” 工具称为“ 元素” 面板。 若要切换到 “元素” 工具，请选择“ 元素 ”选项卡。有一个 “更多工具 ” (+) 按钮和列表，工具栏上还有一个 “更多选项卡” 按钮，这两个按钮都用于选择工具（也称为 面板）。

可以自定义每个工具，工具的内容可以根据上下文进行更改。

“更多工具” () + 中列出的工具可以显示为main工具栏) 上的面板工具 (，也可以显示为抽屉工具栏) 上的抽屉工具 (。 在 命令菜单中，其中每个工具都标记为 面板 工具或 抽屉 工具。 但是，你可以将它们添加到main工具栏或抽屉工具栏，并且可以使用以下任一方法来打开它们或在两个工具栏之间移动它们。

使用“ 更多工具 (+) ”菜单选择任何面板工具或抽屉工具。 “ 更多工具” 菜单显示在多个位置：

在 DevTools 的右上方的“main”工具栏上，单击“自定义和控制 DevTools () ”按钮，将鼠标悬停在“更多工具”命令上，然后选择一个工具。

在 DevTools 顶部的main工具栏上， (面板工具通常) 的位置。

在 抽屉 工具栏上， (抽屉 工具通常) 的位置。

除了面板工具和抽屉工具外，DevTools 还包括以下工具：

DevTools 提供了许多可用于网站的特性和功能。 可以通过多种方式访问 DevTools 的不同部分，但通常一种快速方法是使用命令菜单。

在命令菜单中，这些工具称为“面板”;例如， “元素” 工具称为“ 元素” 面板。 若要切换到 “元素” 工具，请选择“ 元素 ”选项卡。

若要打开命令菜单，请执行以下操作之一：

单击“ 自定义和控制 DevTools () ”按钮，然后选择“ 运行命令”。

按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 。

“命令菜单”允许键入命令以在 DevTools 中显示、隐藏或运行功能。 打开“命令菜单”后，输入“ 更改”一词，然后选择“ 抽屉：显示更改”。

此时会打开 “更改” 工具，这在编辑 CSS 时非常有用。 在这种情况下，“命令菜单”提供了一种快速替代方法，可选择“更多工具 (...) ”，然后选择“更改”，或者在“源”工具中编辑.js文件，然后右键单击并选择“本地修改”。

键入 cha 后，命令菜单将显示选项：

按 Enter，然后打开 “更改” 工具：

另请参阅 使用 Microsoft Edge DevTools 命令菜单运行命令。

可以自定义 DevTools 以满足工作方式的需求。 若要更改设置，请单击 “设置” () 按钮，或按 F1。

在“设置首选项”>页中，可以更改 DevTools 的多个部分。 例如，可以使用 “匹配浏览器语言 ”设置在 DevTools 中使用浏览器中使用的同一语言。 对于另一个示例，请使用 “主题” 设置更改 DevTools 的颜色主题。

还可以更改高级功能的设置，例如：

DevTools 团队在 DevTools 中以 试验 的形式提供新功能。 可以打开或关闭每个试验。 若要查看 实验功能的完整列表，请在 DevTools 中，选择 “设置” (齿轮图标) ，然后选择“ 试验”。

若要预览 DevTools 的最新功能，请下载夜间生成的 Microsoft Edge Canary。